<template>
  <div class="log-management">
    <div class="search-list">
      <ui-form v-model="logForm" label-width="100px" class="query-form">
        <ui-row type="flex" class="row-bg" justify="space-between">
          <ui-col :span="11">
            <ui-form-item label="日志类型">
              <ui-select v-model="logForm.prowlreType" placeholder="请选择客户类型">
                <ui-option value="1" label="登陆日志"></ui-option>
                <ui-option value="2" label="数据变更日志"></ui-option>
                <ui-option value="3" label="操作日志"></ui-option>
              </ui-select>
            </ui-form-item>
          </ui-col>
          <ui-col :span="11">
            <ui-form-item label="操作用户">
              <ui-input type="text" placeholder="请输入" v-model="logForm.logUser"> </ui-input>
            </ui-form-item>
          </ui-col>
        </ui-row>
        <ui-row type="flex" class="row-bg" justify="space-between">
          <ui-col :span="11">
            <ui-form-item label="操作时间">
              <ui-col :span="11">
                <ui-form-item>
                  <ui-date-picker v-model="logForm.startTime" type="date" placeholder="选择日期" prefix-icon="ui-icon-date" :clearable="false">
                  </ui-date-picker>
                </ui-form-item>
              </ui-col>
              <ui-col class="line" :span="2" style="text-align: center;">-</ui-col>
              <ui-col :span="11">
                <ui-form-item>
                  <ui-date-picker v-model="logForm.endTime" type="date" placeholder="选择日期" :clearable="false"> </ui-date-picker>
                </ui-form-item>
              </ui-col>
            </ui-form-item>
          </ui-col>
          <ui-col :span="10">
            <ui-button class="primary-btn" @click="searchList" icon="ui-icon-search" :disabled="btnDisabled">查询</ui-button>
            <ui-button class="default-btn" @click="reset" icon="ui-icon-refresh-right">重置</ui-button>
          </ui-col>
        </ui-row>
      </ui-form>
    </div>
    <div class="table-list">
      <vx-table :columns="columns" :table-data="tableData"></vx-table>
      <div class="page">
        <ui-pagination :total="total" :page-size="pageSize" :current-page="currentPage" :layout="layout" @current-change="handleCurrentChange">
        </ui-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import vxTable from '@/components/vx-table';
export default {
  components: {
    vxTable,
  },
  data() {
    return {
      logForm: {},
      total: 10,
      pageSize: 10,
      currentPage: 1,
      layout: 'total, sizes, prev, pager, next, jumper', // 分页顺序
      tableData: [{ empNo: '1', empName: '1', empDpt: '1', userip: '1', operationType: '1', operationTime: '1' }],
      columns: [
        {
          label: '序号',
          type: 'index',
          width: '80',
        },
        {
          prop: 'empNo',
          label: '员工编号',
          fixed: true,
        },
        {
          prop: 'empName',
          label: '姓名',
          fixed: true,
        },
        {
          prop: 'empDpt',
          label: '所属机构',
          fixed: true,
        },
        {
          prop: 'userip',
          label: '用户IP',
          fixed: true,
        },
        {
          prop: 'operationType',
          label: '操作类型',
          fixed: true,
        },
        {
          prop: 'operationTime',
          label: '操作时间',
          fixed: true,
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.log-management {
  .search-list {
  }
  .table-list {
    margin-top: 20px;
    .page {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-top: 20px;
    }
  }
}
</style>
